<sw-page class="sw-flow-list-index">
    <template #search-bar>
        <sw-search-bar
            initial-search-type="flow"
            :placeholder="$tc('sw-flow.general.placeholderSearchBar')"
            :initial-search="term"
            @search="onSearch"
        />
    </template>

    <template #smart-bar-header>
        <h2>
            {{ $tc('sw-settings.index.title') }}
            <mt-icon
                name="regular-chevron-right-xs"
                size="12px"
            />
            {{ $tc('sw-flow.list.textHeadline') }}

            <span
                v-if="!isLoading"
                class="sw-page__smart-bar-amount"
            >
                ({{ total }})
            </span>
        </h2>
    </template>

    <template #smart-bar-actions>
        {% block sw_flow_index_smart_bar_actions_extension %}
        <sw-extension-teaser-popover
            position-identifier="sw-flow-upload-flow-button"
        />
        {% endblock %}

        <mt-button
            v-tooltip="{
                message: $tc('sw-privileges.tooltip.warning'),
                disabled: acl.can('flow.creator'),
                position: 'bottom',
                showOnDisabledElements: true
            }"
            class="sw-flow-list__create"
            variant="primary"
            :disabled="!acl.can('flow.creator') || undefined"
            @click="$router.push({ name: 'sw.flow.create' })"
        >
            {{ $tc('sw-flow.list.buttonAddFlow') }}
        </mt-button>
    </template>

    <template #content>
        <sw-card-view>
            <sw-tabs
                class="sw-flow-list__tab"
                position-identifier="sw-flow-listing"
                :small="false"
            >
                <sw-tabs-item
                    class="sw-flow-listing__tab-my-flows"
                    name="flows"
                    :title="$tc('sw-flow.general.tabMyFlows')"
                    :route="{ name: 'sw.flow.index.flows'}"
                >
                    {{ $tc('sw-flow.general.tabMyFlows') }}
                </sw-tabs-item>

                <sw-tabs-item
                    class="sw-flow-listing__tab-flow-templates"
                    name="templates"
                    :title="$tc('sw-flow.general.tabFlowTemplates')"
                    :route="{ name: 'sw.flow.index.templates'}"
                >
                    {{ $tc('sw-flow.general.tabFlowTemplates') }}
                </sw-tabs-item>

                {% block sw_flow_tabs_header_extension %}{% endblock %}

                <template #content="{ active }">
                    <template v-if="isLoading">
                        <sw-skeleton />
                        <sw-skeleton />
                    </template>

                    <template v-else>
                        <router-view
                            v-slot="{ Component }"
                        >
                            <component
                                :is="Component"
                                :is-loading="isLoading"
                                :search-term="term"
                                @on-update-total="onUpdateTotalFlow"
                            />
                        </router-view>
                    </template>
                </template>
            </sw-tabs>
        </sw-card-view>

        {% block sw_flow_index_modal_content_custom %}
        {% endblock %}
    </template>
</sw-page>
